//从仓库获取用户名，密码
$(function(){
    users=JSON.parse(localStorage.getItem("users"));
    // console.log(users.length);
    // console.log(users[0].username);
    var tbody=$("tbody");
    for(var i=0;i<users.length;i++){//为表格循环创建tr行
        var num=$("tbody tr").length+1;//id为当前表格行的数量+1。例如空表格时，行数为0，id则为0+1
        var username=users[i].username;
        var password=users[i].password;
        var phone=users[i].phone;
        var tr=$("<tr><td>"+num+"</td><td>"+username+"</td><td>"+password+"</td><td>"+phone+"</td><td><input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm'  onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'></td></tr>")
        tbody.append(tr);
    }
});


//向表中添加行
function doAdd(){
    layui.use('layer', function(){
        var layer = layui.layer;//添加的弹出层
        var text="<table width='400px' height='130px'>"+
                    "<tr>"+
                    "<td>"+
                    "<form class='layui-form' action=>"+
                "<div class='layui-form-item'>"+
            "      <label class='layui-form-label'>用户名</label>"+
            "      <div class='layui-input-block'>"+
            "        <input type='text' value='' name='username' required  lay-verify='username' placeholder='请输入用户名' autocomplete='off' class='layui-input width' style='width: 190px;'>"+
            "        <span style='color: red;font-size: 14px;'></span>"+
            "      </div>"+
            "    </div>"+
            "    <div class='layui-form-item'>"+
            "      <label class='layui-form-label'>密码</label>"+
            "      <div class='layui-input-inline'>"+
            "        <input type='password' value='' name='password' required lay-verify='password' placeholder='请输入密码' autocomplete='off' class='layui-input width'>"+
            "        <span style='color: red;font-size: 14px;'></span>"+
            "      </div>"+
            "    </div>"+
            "    <div class='layui-form-item'>"+
            "        <label class='layui-form-label'>手机号</label>"+
            "        <div class='layui-input-inline'>"+
            "          <input type='text' value='' name='phone' required lay-verify='phone' placeholder='请输入手机号' autocomplete='off' class='layui-input width'>"+
            "          <span style='color: red;font-size: 14px;'></span>"+
            "        </div>"+
            "     </div>"+
                    "</td>"+
                    "</tr>"+
                    "</table>";
            // "<table width='300px' height='130px' style='margin-left:30px'><tr><td>用户名</td><td><input type='text' value='' style='width:220px;height:30px;border:1px solid #ccc' ></td></tr>"+
            // "<tr><td>密码</td><td><input type='password' value='' style='width:220px;height:30px;border:1px solid #ccc'></td></tr>"+
            // "<tr><td>手机号</td><td><div class='layui-input-inline'><input type='text' name='phone' required lay-verify='phone' value='' style='width:220px;height:30px;border:1px solid #ccc' class='layui-input width'></div></td></tr></table>";
        layer.open({
            type: 1, 
            content: 
            '<div style="padding-top:10px;padding-left:10px;width:300px;height:100px;">'+ text +'</div>',
             //这里content是一个普通的String
            area: ['450px', '300px'],
            btn: ['新添','关闭'],
            yes: function(index1, layero){
                //   console.log(layero);
                  var trs=$(layero).find("tr");//找到弹出层中的表格中的每一行
                  var inputs=trs.find("input");//修改后
                //   var inputs=trs.find("input:last-child");//找到弹出层中的输入框
                  var tr=$(_this).parents("tr");
                  var tds=tr.children();
                //   console.log(tds);
                  //弹出层中的新添按钮
                //   btnAdd=$(layero).find(".layui-layer-btn a:eq(0)");
                // console.log(btnAdd);
                var users=JSON.parse(localStorage.getItem("users"));
                var username=inputs[0].value;
                //将所有用户名存下来
                var usernames=[];
                for(var i=0;i<users.length;i++){
                    usernames.push(users[i].username);
                }
                //对添加的弹出层中输入的数据进行校验
                //判断用户名，密码，手机号是否为空
                if(username==''){
                    alert("请输入用户名");
                    return false;
                }
                var password=inputs[1].value;
                if(password==''){
                    alert("请输入密码");
                    return false;
                }
                  var phone=inputs[2].value;
                if(phone==''){
                    alert("请输入手机号");
                    return false;
                }
                /////////////////////////判断用户是否存在，手机号是否符合规则
                if(inputs[2].value.length<11 || inputs[2].value.length>11){//此处可直接判断输入字符串的长度
                    alert("请输入11位数的手机号");
                    return false;
                }
                if(usernames.indexOf(username)!=-1){//在所有的用户名中找到相同的了
                    alert("用户名已存在!");
                    return false;
                }
                

                var NewUser={//新增用户
                    "id":users.length+1,//id为user数组的长度+1
                    "username":username,
                    "password":password,
                    "phone":phone
                }
                users.push(NewUser);
                localStorage.setItem("users",JSON.stringify(users));

                //将数据修改后存回表格
                var tbody=$("tbody:eq(1)");
                // console.log(tbody);
                var tr=$("<tr><td>"+users.length+1,+"</td><td>"+username+"</td><td>"+password+"</td><td>"+phone+"</td><td><input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm'  onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'></td></tr>")
                tbody.append(tr);
                layer.closeAll();
                location.reload();
            },
            btn2: function(index, layero){
                //按钮【按钮二】的回调
                // console.log(2);
                // return false;
            },
            cancel: function(){ 
                //右上角关闭回调
                // console.log(4)
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    });
}

// btnAdd.click(function(){
//      console.log($("input[name=phone]"));
//     inputPhone=$("input[name=phone]").val();
// });



//修改的弹出层
// $(function(){
var _this;
function doChange(obj){
    _this=obj;
    tr=$(_this).parents("tr");
    tds=tr.children();
    console.log(tds[0].innerHTML);
    if(tds[0].innerHTML==1){
        alert("不能修改管理员");
    }else{
        layui.use('layer', function(){
            var layer = layui.layer;
            var text="<table width='300px' height='130px' style='margin-left:30px'><tr><td>用户名</td><td><input type='text' value='"+tds[1].innerHTML+"' style='width:220px;height:30px;border:1px solid #ccc' disabled></td></tr>"+
                "<tr><td>密码</td><td><input type='password' value='"+tds[2].innerHTML+"' style='width:220px;height:30px;border:1px solid #ccc'></td></tr>"+
                "<tr><td>手机号</td><td><input type='text' value='"+tds[3].innerHTML+"' style='width:220px;height:30px;border:1px solid #ccc'></td></tr></table>";
            layer.open({
                type: 1, 
                content: 
                '<div style="padding-top:10px;padding-left:10px;width:300px;height:100px;">'+ text +'</div>',
                 //这里content是一个普通的String
                area: ['500px', '300px'],
                btn: ['修改','关闭'],
                yes: function(index1, layero){
                    //   console.log(layero);
                      var trs=$(layero).find("tr");//找到弹出层中的表格中的每一行
                      var inputs=trs.find("input:last-child");//找到弹出层中的输入框
                      //将数据修改后存回表格
                      if(inputs[2].value.length<11 || inputs[2].value.length>11){
                        alert("请输入11位数的手机号");
                        return false;
                    }
                      tds[1].innerHTML=inputs[0].value;
                      tds[2].innerHTML=inputs[1].value;
                      tds[3].innerHTML=inputs[2].value;
                      var users=JSON.parse(localStorage.getItem("users"));
                    //   console.log(tds);
                      id=[];
                        for(var i=0;i<users.length;i++){
                            id.push(users[i].id);
                      }
                      index=id.indexOf(tds[0].innerHTML*1);
                      console.log(tds[0].innerHTML);
                    //   console.log(index);
                    //修改仓库中的数据
                    users[index]={"id":tds[0].innerHTML*1,"username":inputs[0].value,"password":inputs[1].value, "phone":inputs[2].value};
                    localStorage.setItem("users",JSON.stringify(users));
                    layer.closeAll();
                },
                btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    // console.log(2);
                    // return false;
                },
                cancel: function(){ 
                    //右上角关闭回调
                    // console.log(4)
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });
    }
}

//删除行
function doRemove(obj){
    var users=JSON.parse(localStorage.getItem("users"));
    var tds=$(obj).parents("tr").children("td");//找到点击删除行的每个td格子
    var id1=tds[0].innerHTML;
    var id2=[];
    for(var i=0;i<users.length;i++){
        id2.push(users[i].id);
    }
    if(tds[0].innerHTML==1){//如果序号为1，不让删
        alert("不能删除管理员");
    }else{
        $(obj).parents("tr").remove();//祖先元素中的tr,删除
        var thNum=$("tbody tr").find("td:first");
        $.each(thNum,function(index1,item){
            item.innerHTML=index1+1;
        });
       var index3= id2.indexOf(id1*1);
    //    console.log(index3);
    //    console.log(users[index3]);
       users.splice(index3,1);
       localStorage.setItem("users",JSON.stringify(users));
    }
}
//全部删除
function doDeleteAll(){
    $("tbody tr").slice(1,$("tbody tr").length).remove();//除了第一行不删
    var users=JSON.parse(localStorage.getItem("users"));
    users.splice(1,users.length-1);
    localStorage.setItem("users",JSON.stringify(users));
}

//搜索用户
$(function(){
    $("input:eq(0) + div").click(function(){
        // console.log(1111);
        // console.log($("input:eq(0)"));
        var users=JSON.parse(localStorage.getItem("users"));
        var username=[];
        for(var i=0;i<users.length;i++){
            username.push(users[i].username);
        }
        var usernameSearch=$("input:eq(0)").val();
        var index=username.indexOf(usernameSearch);
        // console.log(index);
        ////////////////
        var tbody=$("tbody");
        tbody.children().remove();
        var tr=$("<tr><td>"+users[index].id+"</td><td>"+users[index].username+"</td><td>"+users[index].password+"</td><td>"+users[index].phone+"</td><td><input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm'  onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'></td></tr>")
        tbody.append(tr);
    });
});
    
